<template>
  <div class="USelect">
    <el-checkbox-group
      :value="formValue"
      @input="input"
      v-bind="$attrs"
    >
      <el-checkbox
        v-for="option in $attrs.options || []"
        :key="option.value"
        :label="option.value"
        v-bind="option"
        :class="[
          option.border ? 'isTick' : ''
        ]"
      >
        {{ option.label }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  name: 'UCheckbox',
  props: {
    formValue: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    input(val) {
      this.$emit('update:formValue', val);
      this.$emit('change', val);
    }
  }
};
</script>

<style lang="scss" scoped>
.isTick {
  padding: 0 15px !important;
  line-height: 32px;
  // /deep/&.el-checkbox {
  //   margin-right: 0;
  // }
  // /deep/ .el-checkbox__input {
  //   display: none;
  // }

  // /deep/ .el-checkbox__label {
  //   padding-left: 0;
  // }
}
</style>